<template>
  <div>
      <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
           
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <el-button class="addCate" type="primary" @click="showAddCate">添加分类</el-button>
            <!-- 表格数据 data绑定的数据列表 selection-type是否设置为多选 columns设置各列的数据 -->
            <tree-table :data="cateList" :columns="columnsList" 
            border show-index index-text="#" :selection-type="false"
            :expand-type="false">
              <!-- 插槽 -->
              <template slot="iconSlot" slot-scope="scope">
               
                <i class="el-icon-success" type="success" v-if="scope.row.cat_deleted == false" style="color:#67C23A; font-size:20px;"></i>
                <i class="el-icon-error" type="error"  v-else style="color:#F56C6C; font-size:20px;"></i>
              </template>
              <!-- 等级 -->
              <template slot="levelSlot" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                <el-tag type="warning" v-else>三级</el-tag>
              </template>
              <!-- 操作 -->
              <template slot="optionSlot" slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditCate(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteCate(scope.row)">删除</el-button>
              </template>
            </tree-table>
            <!-- 分页 -->
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="cateInfo.pagenum"
              :page-sizes="[3, 5, 10, 50]"
              :page-size="cateInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </el-card>
        <!-- 当点击添加分类按钮时显示对话框 -->
        <el-dialog
          title="添加分类"
          :visible.sync="addCateVisible"
          width="50%"
          @close="addCateClosed"
         >
          <!-- 对话框显示内容 -->
          <el-form ref="addCateFormRef" :rules="addCateFormRules" :model="addCateForm" label-width="100px">
            <el-form-item label="商品分类" prop="cat_name" >
              <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
               <el-cascader
                v-model="selectedKeys"
                :options="CateOptions"
                :props="CateOptionsProps"             
                @change="parentCateChanged"
                clearable
                change-on-select

                >
                </el-cascader>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addCateVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 当点击编辑分类按钮时显示对话框 -->
        <el-dialog
          title="提示"
          :visible.sync="editCateVisible"
          width="50%"
          @close="editCateColsed"
        >
          <el-form ref="editCateFormRef" :rules="editCateFormRules" :model="editCateForm" label-width="100px">
            <el-form-item label="活动名称" prop="cat_name">
              <el-input v-model="editCateForm.cat_name" ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editCateVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCate">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
  // 数据
  data(){
    return{
      // 商品分类列表信息
      cateInfo:{
        // 当前页码
        pagenum:1,
        // 显示数据
        pagesize:5
      },
      // 商品分类列表数据
      cateList:[],
      // 当前获取的总的数据条数
      total:0,
      // 当前表格中要显示的各列配置
      columnsList:[
        // 第一列
        {
          "label":"分类名称",
          "prop":"cat_name"
        },{//第二列
          "label":"是否有效",
          // 将当前列定义模板列
          "type":"template",
          // 当前这一列使用模板名称
          "template":"iconSlot"
        },{//第三列 等级
          "label":"等级",
          "prop":"cat_level",
          "type":"template",
          "template":"levelSlot"
        },{//操作
          "label":"操作",
          "type":"template",
          "template":"optionSlot"

        }
      ],
      // 点击添加分类按钮，是否显示对话框
      addCateVisible:false,
      // 要添加分类的表单
      addCateForm:{
        // 要添加的分类名称
        cat_name:"",
        // 父级分类的Id
        cat_pid:0,
        // 分类的等级
        cat_level:0
      },
      // 添加分类时的表单验证规则
      addCateFormRules:{
        cat_name:[
         { required: true, message: '请输入添加的分类', trigger: 'blur' }
        ]
      },
      // 级联的分类列表信息
      CateOptions:[],
      // 要保存的级联分类选择的值
      selectedKeys:[],
      // 指定级联对象的配置对象
      CateOptionsProps:{
        value:'cat_id',
        label:'cat_name',
        expandTrigger:'hover',
        children:"children"
      },
      // 点击编辑按钮，是否显示对话框
      editCateVisible:false,
      // 保存要进行更新的数据
      editCateForm:{
        cat_name:""
      },
      // 保存要进行更新的分类id
      editCateId:"",
      //验证规则
      editCateFormRules:{
        cat_name:[
         { required: true, message: '请输入添加的分类', trigger: 'blur' }
        ]
      }
    }
  },
  // 生命周期函数
  created(){
    // 获取分类列表数据
    this.getCateList()
  },
  // 事件
  methods:{
    // 获取列表数据
    async getCateList(){
      // 向服务器发起请求获取分类列表数据
      const {data:res} = await this.$http.get("categories",{
        params : this.cateInfo
      });

      // 根据服务器返回的状态码进行判断
      if(res.meta.status !== 200){
        return this.$message.error("获取分类列表数据失败")
      }

      // 将服务器返回的列表数据赋值给数组
      this.cateList = res.data.result
      // 将服务器返回的数据条数保存
      this.total = res.data.total
      
      
    },
    // 当页面数据条数发生改变时触发事件
    handleSizeChange(val){
      // val是数据条数
      this.cateInfo.pagesize = val
      // 改变页码后要重新获取列表数据
      this.getCateList()
    },
    // 当当前页码数发生改变时
    handleCurrentChange(val){
      // val是页码
      this.cateInfo.pagenum = val
      // 改变页码后要重新获取列表数据
      this.getCateList()
    },
    // 获取父级分类数据
    async getAddCateList(){
      // 获取要进行显示的级联分类的列表
      const {data:res} = await this.$http.get("categories",{
        params:{type:2}
      })
      console.log(res.data);
    
      
      // 判断服务器返回的状态
      if(res.meta.status !== 200){
        return this.$message.error("数据请求失败")
      }
      // 将返回的级联数据保存
      this.CateOptions = res.data
    },
    // 点击添加分类按钮时，将对话设置为显示
    showAddCate(){
      this.getAddCateList()
     
      // 将对话设置为显示
      this.addCateVisible = true
    },
    // 当在级联选择数据时，触发
    parentCateChanged(){
      console.log(this.selectedKeys);
      
      // 判断已选择的数据id数组
      // 如果length > 0,证明选择了父级分类
      if(this.selectedKeys.length > 0){
        // 父级分类id
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // 为当前分类等级进行赋值
        console.log(this.selectedKeys.length);
        
        this.addCateForm.cat_level = this.selectedKeys.length
        return
      }else{
        //当前没有选择父级分类
        this.addCateForm.cat_pid = 0
        // 为当前分类等级进行赋值
        this.addCateForm.cat_level = 0
      }
      
      
      
    },
    // 点击对话框关闭按钮时，对数据进行清空
    addCateClosed(){
      // 进行引用清空
      this.$refs.addCateFormRef.resetFields()
      
      // 清空选中数据
      this.selectedKeys = []
      //
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    },
    // 点击对话框确认按钮，进行数据提交
    addCate(){
      this.$refs.addCateFormRef.validate(async (valid) => {
          if(!valid) return
          // 向服务器发起请求
          const {data:res} = await this.$http.post("categories",this.addCateForm)
          // 根据服务器返回的状态码进行判断
          if(res.meta.status !== 201){
            return this.$message.error("提交数据失败")
          }

          this.$message.success("提交数据成功")
          this.getCateList()
          
          // 设置对话框关闭
          this.addCateVisible = false
      });
      
    },
    // 点击编辑按钮
    async showEditCate(cate){
      this.editCateId = cate.cat_id
      console.log(cate.cat_id);
      // 向服务器发起请求获取数据
      const {data:res} = await this.$http.get("categories/"+this.editCateId)
      console.log(res);
      // 判断服务器返回的状态码
      if(res.meta.status !== 200){
        return this.$message.error("请求数据失败")
      }

      this.editCateForm = res.data
      
      this.editCateVisible = true
      
    },
    // 点击确认按钮时，向服务器提交数据
    editCate(){

      // 先对表单进行预验证
      this.$refs.editCateFormRef.validate(async valid=>{
        if(!valid) return

        const {data:res} = await this.$http.put(`categories/${this.editCateId}`,this.editCateForm)
        
        if(res.meta.status !== 200){
          return this.$message.error("数据更新失败")
        }
        this.$message.success("数据更新成功")
        this.getCateList()
        this.editCateVisible = false
      })
      // 
      
    },
    // 点击对话框关闭按钮
    editCateColsed(){
      this.$refs.editCateFormRef.resetFields()
      this.editCateVisible = false
    },
    // 点击分类删除按钮时，弹出提示框
    async deleteCate(cate){
      
      const confirmResult = await this.$confirm('是否要删除此分类', '删除分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(  
        err=>err    
      );

      if(confirmResult !== "confirm"){
        return this.$message.info("取消删除")
      }

      const {data:res} = await this.$http.delete("categories/"+cate.cat_id)
      
      if(res.meta.status !== 200){
        return this.$message.error("删除失败")
      }

      this.$message.success("删除成功")
      this.getCateList()
    }
  }
}
</script>

<style lang="less" scoped>
  .addCate{
    margin-bottom: 15px;
  }
  .el-cascader{
    width: 100%;
  }
  
</style>